<template>
  <div id="app">
    <headerPage
      :master="master"
      :category="category"
      address="home/chatList"
    ></headerPage>

    <div class="wrapper" ref="wrapper">
      <div class="contain" ref="contain">
        <div class="content" v-for="(item, index) in array" :key="index">
          <div v-if="item.sender == firstPeople" class="firstPeople">
            <div class="firstImg">
              <img :src="myImg" />
            </div>
            <div class="firstMessage">
              <div class="block">{{ item.message }}</div>
            </div>
          </div>
          <div v-else class="secendPeople">
            <div class="secendImg">
              <img :src="otherImg" />
            </div>
            <div class="secendMessage">
              <div class="block">{{ item.message }}</div>
            </div>
          </div>
          <div style="height:20px;"></div>
        </div>
      </div>
    </div>
    <div class="sendMessage">
      <div class="left">
        <el-input v-model="message" placeholder="请输入内容"></el-input>
      </div>
      <div class="right">
        <el-button type="primary" plain @click="sendMessage" class="sendbtn"
          >发送</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import headerPage from "@/components/pageHeader2/index.vue";
var wx;
export default {
  name: "",
  data() {
    return {
      firstPeople: this.$route.query.firstPeople,
      secendPeople: this.$route.query.secendPeople,
      master: this.$route.query.master,
      category: this.$route.query.category,
      otherImg: this.$route.query.headImg,
      myImg: this.$store.state.yb_userhead,
      message: "",
      array: [],
    };
  },
  methods: {
    sendMessage() {
      if (this.message == "") {
        this.$message({
          message: "请输入聊天信息",
          type: "warning",
        });
      } else {
        //  私聊,数据由后端操作保存在数据库中,我们只负责渲染数据
        var that = this;
        var message = {
          toUser: that.secendPeople,
          sender: that.firstPeople,
          message: that.message,
        };
        wx.send(JSON.stringify(message));
        //将数据异步保存在数据库中
        this.axios
          .get("http://120.78.199.38:9000/addPrivateTalk", {
            params: {
              sender: that.firstPeople,
              toUser: that.secendPeople,
              message: that.message,
            },
          })
          .then((res) => {});
        this.message = "";
      }
    },
  },
  components: {
    headerPage,
  },
  watch: {
    array: function() {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
          mouseWheel: true, //开启鼠标滚轮
          disableMouse: false, //启用鼠标拖动
          disableTouch: false, //启用手指触摸
          click: true,
        });
        //每次数组改变的时候就滑动到最底层
        this.scroll.scrollTo(0, this.scroll.maxScrollY);
      });
    },
  },
  created() {
    var that = this;
    //将数据库的数据渲染出来
    this.axios
      .get("http://120.78.199.38:9000/findChathistory", {
        params: {
          sender: that.firstPeople,
          toUser: that.secendPeople,
        },
      })
      .then((res) => {
        that.array = res.data;
      });
  },
  mounted() {
    var that = this;
    //连接websocket服务
    wx = new WebSocket("ws://120.78.199.38:9000/chat/" + this.firstPeople);
    //开启时的反应
    wx.open = function() {
      // that.user.push(that.$route.query.user);
    };
    //接受到消息的反应
    wx.onmessage = function(event) {
      var json = JSON.parse(event.data);
      // console.log(json);
      that.array.push(json);
    };
    //关闭之后做的事情
    wx.onclose = function() {};
    //关闭时的反应
    wx.onclose();
  },
};
</script>

<style scoped>
#app {
  height: 100%;
  width: 100%;
  background-color: rgb(236, 234, 240);
}
.wrapper {
  height: 86%;
  width: 100%;
  overflow: hidden;
}
.contain {
  width: 100%;
}
.sendMessage {
  height: 7%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: white;
}
.left {
  width: 80%;
  height: 100%;
}
.right {
  width: 20%;
  height: 100%;
}
.el-input {
  width: 90%;
  height: 90%;
  position: relative;
  left: 2vh;
  top: 0.5vh;
}
.el-button {
  height: 80%;
  width: 80%;
  position: relative;
  top: 12%;
  font-size: smaller;
}
.content {
  width: 100%;
}

img {
  width: 7vh;
  height: 7vh;
  border-radius: 50%;
}
.secendPeople {
  width: 100%;
  display: flex;
  position: relative;
}
.firstPeople {
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: row-reverse;
}
.firstMessage {
  position: relative;
  right: 5%;
  text-align: left;
  color: white;
  border-radius: 8px;
  background-color: rgb(197, 218, 244);
}
.firstImg {
  position: relative;
  right: 3%;
  width: 15%;
}
.secendMessage {
  position: relative;
  left: 3%;
  text-align: left;
  color: black;
  border-radius: 8px;
  background-color: white;
}
.secendImg {
  position: relative;
  left: 3%;
  width: 15%;
}
.block {
  max-width: 180px;
  position: relative;
  margin: 10px;
}
.sendbtn {
  width: 90%;
  height: 80%;
  line-height: 80%;
}
</style>
